<template>
  <!--基础属性-->
  <nf-form
    v-form-drag="baseFormProps"
    :model="meta"
    v-bind="baseFormProps"
  >
  </nf-form>
  <el-button type="" @click="addNewCol">添加字段</el-button>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { nfForm } from '../../map'
  import form_base from '../json/form-base.json'

  export default defineComponent({
    name: 'nf-meta-help-form-base',
    components: {
      nfForm
    },
    props: {
      meta: [ Object ] // 表单的 meta
    },
    setup(props, context) {

      // 基础属性的表单需要的 meta，创建表单用
      const baseFormProps = reactive(form_base)

      // 添加新字段
      let colIndex = 0
      const addNewCol = () => {
        colIndex ++
        const newId = new Date().valueOf() + colIndex
        const col = {
          formItemMeta: {
            columnId: newId,
            colName: 'newCol_' + colIndex,
            label: "新字段",
            controlType: 101,
            defValue: "",
            title: "是不是很方便？",
            colCount: 1
          },
          placeholder: "动态创建的测试字段"
        }

        // 添加验证，默认必填
        // ruleMeta[newId] = [{}]
        // 添加字段
        // itemMeta[newId] = col
        // colOrder.push(newId)
      }


      return {
        baseFormProps,
        addNewCol
      }
    }
  })
</script>